<template>
  <Page name="我的对接人" :show-add="isShowAdd">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="docking-top">
      <div
        class="docking-top-title"
        :class="{active: currentTitle == 'left'}"
        @click="dockingPeople('left')"
      >
        <p>对接人</p>
        <i></i>
      </div>
      <div
        class="docking-top-title"
        :class="{active: currentTitle == 'right'}"
        @click="dockingPeople('right')"
      >
        <p>待同意</p>
        <i></i>
      </div>
    </div>
    <ScrollList ref="scroll" :config="config" @bottom="getPage" @pull="pull">
      <div class="dock">
        <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
        <ul>
          <li v-for="item in list" :key="item.relation_uid" :data-uid="item.relation_uid">
            <h4>{{item.nickname}}</h4>
            <div class="docking-title">
              <span class="docking-manager" v-for="(it, ind) in item.manager" :key="ind">{{it}}</span>
            </div>
            <p class="labels">
              <!-- <span v-for="child in item.manager">{{child}}</span> -->
            </p>
            <p class="contact">
              <img src="~/assets/img/duijieren_phone.png" alt="phone">
              <span>{{item | showContact("phone")}}</span>
            </p>
            <p class="contact">
              <img src="~/assets/img/duijieren_patato.png" alt="potato">
              <span>{{item | showContact("potato")}}</span>
            </p>
            <p class="contact">
              <img src="~/assets/img/duijieren_tg.png" alt="telegram">
              <span>{{item | showContact("telegram")}}</span>
            </p>
            <div class="docking-button">
              <button
                type="button"
                class="btn-default"
                :class="{hide: item.is_opt == '1'}"
                @click="disposePeople(item, 'cancel')"
                v-if="currentTitle == 'left'"
              >删除</button>
              <button
                type="button"
                class="btn-default btn-right"
                @click="disposePeople(item, 'reject')"
                v-if="currentTitle == 'right'"
              >驳回</button>
              <button
                type="button"
                class="btn-primary"
                @click="disposePeople(item, 'agree')"
                v-if="currentTitle == 'right'"
              >同意</button>
            </div>
          </li>
        </ul>
      </div>
    </ScrollList>
  </Page>
</template>

<script>
import Page from "~/components/page";
import ScrollList from "~/components/ScrollList";
import UILoading from "~/components/loading";
import UiEmpty from "~/components/empty";
export default {
  components: {
    Page,
    ScrollList,
    [UILoading.name]: UILoading,
    UiEmpty
  },
  data() {
    return {
      isShowAdd: true,
      currentTitle: "left",
      initLoading: true,
      config: {
        bottom: false,
        pull: false,
        end: false
      },
      page: 1,
      total: 1,
      loading: false,
      list: [],
      empty: {
        text: "暂无数据"
      }
    };
  },
  filters: {
    showContact(item, title) {
      let _title = "";
      item.contact_ways.forEach((element, index, array) => {
        if (element.type == title) {
          _title = element.tel;
          return;
        }
      });
      if (_title == "") return "无";
      return "+" + _title;
    }
  },
  mounted() {
    (async () => {
      await this.getPage();
    })();
  },
  methods: {
    async pull(cb) {
      this.$nuxt.$loading.start();
      this.page = 1;
      this.loading = false;
      this.config.end = false;
      await this.getPage(true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(isRefresh) {
      if (this.loading || this.config.end) return false;
      this.loading = true;
      try {
        let _tab = this.currentTitle == "left" ? 1 : 0;
        let { data: rs } = await this.$axios.post("?ct=api&ac=account_list", {
          tab: _tab,
          page: this.page
        });
        if (rs.code == 0) {
          this.initLoading = false;
          const { data } = rs;
          this.total = Number(data.total);

          if (isRefresh) {
            this.list = data.list;
          } else {
            this.list = this.list.concat(data.list);
          }

          for (var i = 0; i < this.list.length; i++) {
            this.list[i].manager = this.list[i].manager.split("、");
          }
          if (this.total > this.list.length) {
            this.page++;
          } else {
            this.config.end = true;
          }
          if (this.list.length == 0) {
            this.config.end = false;
          }
        } else {
          this.initLoading = false;
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
      this.loading = false;
    },
    async dispose_relation(relation_uid, action) {
      let { data: rs } = await this.$axios.post(
        "?ct=api&ac=handling_relation",
        {
          relation_uid: relation_uid,
          action: action
        }
      );

      if (rs.code == 0) {
        if (rs.data.state > 0) {
          if (action == "cancel") {
            this.$alert({
              title: "操作成功"
            }).then(() => {});
          }
          this.$refs.scroll.$emit("pulling");
        }
      } else {
        this.$toast(rs.msg);
      }
    },
    disposePeople(item, active) {
      let str = "";
      switch (active) {
        case "cancel":
          str = "删除后该对接人将不能登录当前账号";
          break;
        case "agree":
          str = "同意该会员成为您的对接人";
          break;
        case "reject":
          str = "驳回该会员的申请";
          break;
        default:
          break;
      }
      this.$alert({
        title: str,
        cancel: true
      })
        .then(async () => {
           await this.dispose_relation(item.relation_uid, active)
        })
        .catch(() => {});
    },
    dockingPeople(tab) {
      if (this.currentTitle == tab) return;
      this.currentTitle = tab;
      this.$refs.scroll.$emit("pulling");
    }
  }
};
</script>

<style lang="less" scoped>
.docking-top {
  display: flex;
  position: fixed;
  width: 100%;
  line-height: 70px;
  background-color: #fff;
  .docking-top-title {
    flex: 1;
    text-align: center;
    p {
      font-size: 30px;
      font-family: "PingFangSC-Medium";
    }
    i {
    }
  }
  .docking-top-title.active {
    p {
      color: #2086f9;
    }
    i {
      display: block;
      margin-left: calc(50% - 15px);
      width: 30px;
      height: 4px;
      border-radius: 2px;
      background-color: #2086f9;
    }
  }
}
.scroll-list {
  margin-top: 70px;
}
.dock {
  ul {
    li {
      margin-top: 30px;
      background: #fff;
      h4 {
        line-height: 80px;
        padding: 0 30px;
        font-size: 30px;
      }
      .docking-title {
        margin-top: -8px;
        margin-bottom: 10px;
        span.docking-manager {
          margin-left: 30px;
          padding: 4px;
          font-family: "PingFangSC-Regular";
          font-size: 24px;
          color: #d39b00;
          background-color: #fcf8eb;
        }
      }
      .labels {
        // padding: 0 30px;
        // padding-bottom: 30px;
        border-bottom: 2px solid #ededed;
        span {
          font-size: 24px;
          padding: 5px 10px;
          margin-right: 20px;
          background: #fcf8eb;
          color: #d39b00;
        }
      }
      .contact {
        line-height: 72px;
        padding: 0 30px;
        font-size: 28px;
        color: #666;
        img {
          width: 28px;
          vertical-align: middle;
        }
        span {
          padding-left: 20px;
        }
      }
      .docking-button {
        display: flex;
        justify-content: flex-end;
        padding-top: 20px;
        padding-right: 30px;
        padding-bottom: 20px;
        .btn-default {
          width: 150px;
          height: 60px;
          line-height: 60px;
          font-family: "PingFangSC-Regular";
          font-size: 28px;
          color: #666;
          text-align: center;
          border: 2px solid #ededed;
          border-radius: 30px;
          background-color: #fff;
        }
        .btn-default.hide {
          display: none;
        }
        .btn-default.btn-right {
          margin-right: 20px;
        }
        .btn-primary {
          width: 150px;
          height: 60px;
          line-height: 60px;
          font-family: "PingFangSC-Regular";
          font-size: 28px;
          color: #2086f9;
          text-align: center;
          border: 2px solid #2086f9;
          border-radius: 30px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>
